<template>
    <div id="bubble" :style="{ width: widthProp, height: heightProp }"></div>
</template>
  
<script>
export default {
    props: {
        widthProp: {
            type: String,
            default: "2%",
        },
        heightProp: {
            type: String,
            default: "2%",
        },
        data: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    mounted() {
        this.drawChart6();
    },
    methods: {
        drawChart6() {
            // 基于准备好的dom，初始化echarts实例  这个和上面的main2对应
            let myChart = this.$echarts.init(document.getElementById("bubble"));

            const data = [
                [
                    [2019, 8, 56943299, 'Environment', 45218],
                    [2020, 10, 78958237, 'Social', 65218],
                    [2021, 12, 65483022, 'Governance', 21990],
                    [2022, 20, 870601776, 'SDG', 11990],
                    [2023, 12, 82249285, 'TCFD', 5690],
                ],
            ];
            var option = {
                legend: {
                    top: 'bottom'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [20, 100],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: [
                            { value: 40, name: 'GRI201' },
                            { value: 38, name: 'GRI202' },
                            { value: 32, name: 'GRI203' },
                            { value: 30, name: 'GRI204' },
                            { value: 28, name: 'GRI205' },
                            { value: 26, name: 'GRI206' },
                            { value: 22, name: 'GRI207' },
                            { value: 18, name: 'GRI208' }
                        ]
                    }
                ]
            };

            myChart.setOption(option);
        },
    },
};
</script>
  
<style></style>